<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
</div>

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

<table class="table table-bordered table-striped">
    <thead>
    <tr class="success">
        <th>表格头</th>
        <th>表格头</th>
        <th>表格头</th>
        <th>表格头</th>
        <th>表格头</th>
        <th>表格头</th>


    </tr>


    </thead>
    <tbody>
    <tr>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>

    </tr>
    <tr>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>

    </tr>
    <tr>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>

    </tr>
    <tr>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>

    </tr>
    <tr>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>

    </tr>


    </tbody>
</table>
<i class="glyphicon glyphicon-glass text-success"></i>

<div class="row">
    <div class="col-xs-1">上传进度:</div>
    <div class="col-xs-6">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuemin="0"
                 aria-valuemax="100">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
  /* $(function(){
       var current=0;
       var timer=window.setInterval(function(){
           current++;
           if(current>99){
               window.clearInterval(timer);

           }
           $(".progress-bar").prop("style","width:"+current+"%;").text(current+"%");
       },100)
   })*/
</script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
        <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>